import React, { PureComponent } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import avatarMan from '@/assets/avatar_man.png';
import avatarWoman from '@/assets/avatar_woman.png';
import styles from './StaffInfoList.less';
import BaseInfoUpdateForm from './BaseInfoUpdateForm';//更新基本信息表单
import JobInfoUpdateForm from './JobInfoUpdateForm';//更新职务信息表单
import JobGradeInfoUpdateForm from './JobGradeInfoUpdateForm';//更新职级信息表单
import PATJobInfoUpdateForm from './PATJobInfoUpdateForm';//更新专业技术职务信息表单
import PoliceRankInfoUpdateForm from './PoliceRankInfoUpdateForm';//更新警衔信息表单
import EduInfoUpdateForm from './EduInfoUpdateForm';//更新学历信息表单
import TrainInfoUpdateForm from './TrainInfoUpdateForm';//更新培训信息表单
import CheckInfoUpdateForm from './CheckInfoUpdateForm';//更新考核信息表单
import CurriculumInfoUpdateForm from './CurriculumInfoUpdateForm';//更新履历信息表单
import FamilyMemberInfoUpdateForm from './FamilyMemberInfoUpdateForm';//更新家庭成员信息表单
import DisciplineInfoUpdateForm from './DisciplineInfoUpdateForm';//更新惩戒信息表单

import JobInfoCreateForm from './JobInfoCreateForm';//新增职务信息表单
import JobGradeInfoCreateForm from './JobGradeInfoCreateForm';//新增职级信息表单
import PATJobInfoCreateForm from './PATJobInfoCreateForm';//新增专业技术职务信息表单
import PoliceRankInfoCreateForm from './PoliceRankInfoCreateForm';//新增警衔信息表单
import EduInfoCreateForm from './EduInfoCreateForm';//新增学历信息表单
import TrainInfoCreateForm from './TrainInfoCreateForm';//新增培训信息表单
import CheckInfoCreateForm from './CheckInfoCreateForm';//新增考核信息表单
import CurriculumInfoCreateForm from './CurriculumInfoCreateForm';//新增履历信息表单
import FamilyMemberInfoCreateForm from './FamilyMemberInfoCreateForm';//新增家庭成员信息表单
import DisciplineInfoCreateForm from './DisciplineInfoCreateForm';//新增惩戒信息表单

import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Button,
    message,
    Upload,
    Icon,
    Card,
    DatePicker,
    InputNumber,
    Collapse,
    Cascader,
    Modal,
    Spin
} from 'antd';
const { Panel } = Collapse;
const FormItem = Form.Item;
const { confirm } = Modal;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};
/* eslint react/no-multi-comp:0 */
@connect(({ prostaff, loading }) => ({
    prostaff,
    loading: loading.models.prostaff,
}))

@Form.create()
class StaffUpdateForm extends PureComponent {

	state = {
	   loading: false,
	   file: null,
	   flag: "1",
	   requestModelName:"prostaff",
	   editBaseInfo: false,

     jobInfoIndex: "", // 职务信息
     jobGradeInfoIndex: "", // 职级信息
     pATJobInfoIndex: "", // 专业技术职务信息
     policeRankInfoIndex: "", // 警衔信息
     eduInfoIndex: "", // 学历信息
     trainInfoIndex: "", // 培训信息
     checkInfoIndex: "", // 考核信息
     curriculumInfoIndex: "", // 履历信息
     familyMemberInfoIndex: "", // 家庭成员信息
     disciplineInfoIndex: "", // 惩戒信息

     modalVisibleByJobInfo: false, // 职务信息
     modalVisibleByJobGradeInfo: false, // 职级信息
     modalVisibleByPATJobInfo: false, // 专业技术职务信息
     modalVisibleByPoliceRankInfo: false, // 警衔信息
     modalVisibleByEduInfo: false, // 学历信息
     modalVisibleByTrainInfo: false, // 培训信息
     modalVisibleByCheckInfo: false, // 考核信息
     modalVisibleByCurriculumInfo: false, // 履历信息
     modalVisibleByFamilyMemberInfo: false, // 家庭成员信息
     modalVisibleByDisciplineInfo: false, // 惩戒信息

     loadingBaseInfo: false,
     loadingJobInfo: false, // 职务信息
     loadingJobGradeInfo: false, // 职级信息
     loadingPATJobInfo: false, // 专业技术职务信息
     loadingPoliceRankInfo: false, // 警衔信息
     loadingEduInfo: false, // 学历信息
     loadingTrainInfo: false, // 培训信息
     loadingCheckInfo: false, // 考核信息
     loadingCurriculumInfo: false, // 履历信息
     loadingFamilyMemberInfo: false, // 家庭成员信息
     loadingDisciplineInfo: false, // 惩戒信息

       loadingContactInfo: false,
       loadingAccountInfo: false,
       loadingEducation: false,
       loadingWork: false,
       loadingTrain: false,
       loadingCertificate: false,
    subsetInfoData: {

    },

    jobInfo: [], // 职务信息
    jobGradeInfo: [], // 职级信息
    pATJobInfo: [], // 专业技术职务信息
    policeRankInfo: [], // 警衔信息
    eduInfo: [], // 学历信息
    trainInfo: [], // 培训信息
    checkInfo: [], // 考核信息
    curriculumInfo: [], // 履历信息
    familyMemberInfo: [], // 家庭成员信息
    disciplineInfo: [], // 惩戒信息
	};

	componentDidMount () {
  		const { dispatch } = this.props;
  		const za0100 = this.props.location.query.za0100;
  		dispatch({
	    	type: 'prostaff/get_all_city',
	    	payload: {
	    		dictid:"AB"
	    	}
	    });
		dispatch({
	    	type: 'prostaff/get_all_staff_info',
	    	payload: {
	    		za0100: za0100
	    	}
	   });
	    dispatch({
			type: 'prostaff/get_all_post_for_user',
		});

     /* dispatch({
       	type: 'prostaff/get_for_staff_jobInfo',
       	payload: {
       		za0100: za0100
       	}
      }); */
	}

	//编辑基本信息
	genExtraBaseInfo = () => (
		<div
			style={{color: '#1890FF'}}
			onClick={this.handleBaseInfo}>
			<Icon
		    type="edit"
		  	/>
		  	编辑
		</div>
	);
// 显示编辑基本信息
	handleBaseInfo = (event) => {
		event.stopPropagation();
		const { form } = this.props;
		form.resetFields();
		this.setState({
			editBaseInfo: true,
			editContactInfo: false,
			editAccountInfo: false,
			eduCurrentIndex: ""
		})
	}


  // 编辑子集信息
  genExtraInfo = (e,key) => (
  	<div
  		style={{color: '#1890FF'}}
  		onClick={this.handleInfo(e,key)}>
  		<Icon
  	    type="edit"
  	  	/>
  	  	编辑
      <Icon type="delete" style={{fontSize: '16px',color: '#c0c4cc'}} onClick={this.handleDelete(e,key)} />
  	</div>
  );

  // 显示编辑子集信息
  handleInfo = (key,e) => (event) => {
  	event.stopPropagation();
  	/* const { form } = this.props;
  	form.resetFields(); */
  	this.setState({
  		[e]: key
  	})
  }

	beforeUpload = file => {
		this.setState({
	       file:file,
		});

		if(window.FileReader) {
	      const reader = new FileReader();

	      reader.readAsDataURL(file);

			  reader.addEventListener('load', () => {

			  	this.setState({
		          imageUrl:reader.result,
		          loading: false,
		      })

			  });
		}

	  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
	  if (!isJpgOrPng) {
	    message.error('You can only upload JPG/PNG file!');
	  }
	  const isLt2M = file.size / 1024 / 1024 < 2;
	  if (!isLt2M) {
	    message.error('Image must smaller than 2MB!');
	  }
	  return isJpgOrPng && isLt2M;
	}

	//更新基本信息
  	handleSubmitBaseInfo = (formVals) => {
	    event.preventDefault();
	    const { dispatch } = this.props;
	    this.setState({
        loadingBaseInfo: true
      })
        // formData.append('uploadfile', formVals.file);
		// formData.append('bodymap', JSON.stringify(formVals));
		dispatch({
            type: 'prostaff/update_for_staff_baseinfo',
            payload: {
            	formdata: formVals
          	},
          	callback:(res) => {
          		if(res.success) {
          			message.success('更新成功！');
          			this.setState({
                  editBaseInfo: false,
                  loadingBaseInfo: false
                })
          		}
          	}
      	});
	}
  	//取消更新基本信息
  	cancelEditBaseInfo = () => {
		this.setState({
			editBaseInfo: false
		})
	}


  //取消更新子集信息
  cancelEditInfo = (e) => {
    this.setState({
      [e]: ""
    })
  }

  //更新子集信息
  handleSubmitSubsetInfo = (formVals,url) => {
    event.preventDefault();
    let index = url.substr(17)+"Index";
    let loading = 'loading' + url.substr(17).substr(0,1).toUpperCase() + url.substr(17).substr(1);
    const { dispatch } = this.props;
    this.setState({
      [loading]: true
    })
    dispatch({
      type: 'prostaff/' + url,
      payload: {
        formdata: formVals
      },
      callback:(res) => {
        if(res.success) {
          message.success('更新成功！');
          this.setState({
            [loading]: false,
            [index]: ""
          })
        }
      }
    });
	}


  	//是否显示新增弹窗
  	handleModalVisible = (flag,key) => {
      key = 'modalVisibleBy' + key
      this.setState({
        [key]: !!flag,
      });
    };

    // 新增子集信息
    handleAdd = (fieldsValue,key) => {
      const { dispatch } = this.props;
    	const za0100 = this.props.location.query.za0100;
      let url = key.substring(0, 1).toLowerCase() + key.substring(1);
      let loading = 'loading' + key
    	this.setState({
        [loading]: true
      })
      dispatch({
        type: 'prostaff/insert_for_staff_'+ url,
        payload: {
          za0100: za0100,
          ...fieldsValue
        },
        callback:(res) => {
          if(res.success) {
            message.success('添加成功！');
            this.setState({
              [loading]: false
            })
            this.onDetailsInfoChange(1,url)
          }
        }
      });
      this.handleModalVisible(false,key);
    }

    //删除子集信息
    handleDelete = (e,key) => (event) => {
      // item.id,"jobGradeInfoIndex"
      event.preventDefault();
      let url = key.substr(0,key.length - 5)
    	const { dispatch } = this.props;
      const za0100 = this.props.location.query.za0100;
    	let loading = 'loading' + url.substr(0,1).toUpperCase() + url.substr(1);
    	const _this = this;
    	confirm({
        title: '您确定要删除这组信息吗?',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          _this.setState({
            [loading]: true
          })
          dispatch({
            type: 'prostaff/delete_for_staff_' + url,
            payload: {
              recordid: e,
              za0100: za0100
            },
            callback: (res) => {
              if(res.success) {
                message.success('删除成功');
              }else {
                message.success('删除失败');
              }
              _this.onDetailsInfoChange(1,url)
              _this.setState({
                [loading]: false
              })
            }
          });
        },
        onCancel() {},
    	});

    };

  // 点击子集信息
   onDetailsInfoChange = (e,key) => {
     // key = '1' 打开
     if(e == '1'){
       const { dispatch } = this.props;
       const id = this.props.location.query.za0100;
       dispatch({
          type: 'prostaff/get_for_staff_' + key,
          payload: {
        		za0100: id
          },
          callback: (res) => {
          	if(res.success) {
        			this.setState({ [key]: res.list });
          	}else {
          		message.success('查询失败');
          	}
          }
        });
     }

    };



  	render () {

      const { getFieldDecorator } = this.props.form
      const uploadButton = (
      <div style={{marginTop: '20px'}}>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">上传头像</div>
      </div>
    );

    const {
    	imageUrl,
    	flag,
    	editBaseInfo,

      jobInfoIndex, // 职务信息
      jobGradeInfoIndex, // 职级信息
      pATJobInfoIndex, // 专业技术职务信息
      policeRankInfoIndex, // 警衔信息
      eduInfoIndex, // 学历信息
      trainInfoIndex, // 培训信息
      checkInfoIndex, // 考核信息
      curriculumInfoIndex, // 履历信息
      familyMemberInfoIndex, // 家庭成员信息
      disciplineInfoIndex, // 惩戒信息

    	modalVisibleByJobInfo, // 职务信息
      modalVisibleByJobGradeInfo, // 职级信息
      modalVisibleByPATJobInfo, // 专业技术职务信息
      modalVisibleByPoliceRankInfo, // 警衔信息
      modalVisibleByEduInfo, // 学历信息
      modalVisibleByTrainInfo, // 培训信息
      modalVisibleByCheckInfo, // 考核信息
      modalVisibleByCurriculumInfo, // 履历信息
      modalVisibleByFamilyMemberInfo, // 家庭成员信息
      modalVisibleByDisciplineInfo, // 惩戒信息

    	loadingBaseInfo,
      loadingJobInfo, // 职务信息
      loadingJobGradeInfo, // 职级信息
      loadingPATJobInfo, // 专业技术职务信息
      loadingPoliceRankInfo, // 警衔信息
      loadingEduInfo, // 学历信息
      loadingTrainInfo, // 培训信息
      loadingCheckInfo, // 考核信息
      loadingCurriculumInfo, // 履历信息
      loadingFamilyMemberInfo, // 家庭成员信息
      loadingDisciplineInfo, // 惩戒信息

      loadingContactInfo,
      loadingAccountInfo,
      loadingEducation,
      loadingWork,
      loadingTrain,
      loadingCertificate,
      requestModelName,
      subsetInfoData,
      jobInfo, // 职务信息
      jobGradeInfo, // 职级信息
      pATJobInfo, // 专业技术职务信息
      policeRankInfo, // 警衔信息
      eduInfo, // 学历信息
      trainInfo, // 培训信息
      checkInfo, // 考核信息
      curriculumInfo, // 履历信息
      familyMemberInfo, // 家庭成员信息
      disciplineInfo, // 惩戒信息
    } = this.state;

	const {
		prostaff: {
			staffInfo,
			cascaderList,
			selectDeptTree,
			postForUser,
      jobInfoList
		},
		loading,
		dispatch
	} = this.props;
	/* const {
		map:{
			datarecord,
			 person_communication_information,
			person_account_information,
			person_educational_experience,
			person_work_experience,
			person_training,
			person_certificate
		},
	} = staffInfo; */

	//更新基本信息
	const parentUpdateByBaseInfo = {
		dispatch: this.props.dispatch,
		cascaderList,
		selectDeptTree,
		postForUser,
		requestModelName,
		handleSubmitBaseInfo: this.handleSubmitBaseInfo,
		cancelEditBaseInfo: this.cancelEditBaseInfo,
		editBaseInfo
	}

  //更新子集信息
  const parentUpdate = {
  	handleSubmitSubsetInfo: this.handleSubmitSubsetInfo,
  	cancelEditJobInfo: this.cancelEditInfo,
  };


//新增子集信息
	const parentMethods = {
		handleAdd: this.handleAdd,
		handleModalVisible: this.handleModalVisible,
	};

    return (
    	<PageHeaderWrapper title="编辑员工">
    	<Card bordered={false} style={{width:"80%",margin: '20px auto'}}>
    		<div style={{height: '100px',float: 'left'}}>
          <img src="http://www.saycoding.cn/images/family.png"  className={ styles.staffAvatar } alt="搜索标志" />
    			{/*<img src={ person_information && Object.keys(person_information).length && person_information.photo_sign?person_information.photo_sign:person_information && Object.keys(person_information).length && person_information.gender == "02"?avatarWoman:avatarMan } className={ styles.staffAvatar } alt="搜索标志" />*/}
    		</div>
    		<div style={{height: '100px',float: 'left',marginLeft: '20px'}}>
    			<h2>{staffInfo && Object.keys(staffInfo.datarecord).length? staffInfo.datarecord.a0101:null}</h2>
    			<div style={{marginTop: '50px'}}>
    				<span style={{marginRight: '10px'}}>
    					出生日期<span style={{paddingLeft: '5px',color: '#333'}}>{staffInfo && Object.keys(staffInfo.datarecord).length? moment(staffInfo.datarecord.a0107).format('YYYY-MM-DD'):null}</span>
    				</span>
    				<span>
	  					人员状态<span style={{paddingLeft: '5px',color: '#333'}}>{staffInfo && Object.keys(staffInfo.datarecord).length? staffInfo.datarecord.a0199:null}</span>
    				</span>
    			</div>
    		</div>
    	</Card>
    <Spin size="large" spinning={loadingBaseInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
    >
    <div className={styles.cardMark}></div>
    <Panel header="基本信息" key="1" extra={this.genExtraBaseInfo()}>
	    <Card bordered={false} style={{ marginTop: '-20px' }}>
	      <div className="demo-container">
	      	{staffInfo && Object.keys(staffInfo.datarecord).length ? (
				<BaseInfoUpdateForm {...parentUpdateByBaseInfo}  values={staffInfo.datarecord}/>
			):null}
	      </div>
	    </Card>
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingJobInfo}>
      <Collapse
        bordered={false}
        expandIconPosition="right"
        style={{width:"80%",margin: '20px auto',position: 'relative'}}
        onChange={(e) => this.onDetailsInfoChange(e,"jobInfo")}
      >
        <div className={styles.cardMark}></div>
        <Panel header="职务信息">
          <Card bordered={false} style={{ marginTop: '-20px' }}>

            {jobInfo && jobInfo.map((item,index) => {
              const editjob = item.id == jobInfoIndex ? true:false;
              return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
                <Collapse accordion
                  bordered={false}
                  expandIconPosition="right"
                  style={{width:"100%",margin: '8px auto',position: 'relative'}}
                >
                <div className={styles.cardMark}></div>
                <Panel header={"职务信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"jobInfoIndex")}>
                  <Card bordered={false} style={{ marginTop: '-20px' }}>
                    <div className="demo-container">
                      {item && Object.keys(item).length ? (
                       <JobInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"jobInfoIndex"} values={item}/>
                  ):null}
                    </div>
                  </Card>
                </Panel>
                </Collapse>
              </Spin>)
            })}

            <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,"JobInfo")}>
              <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
              <span>添加职务信息</span>
            </div>

        </Card>
        <JobInfoCreateForm {...parentMethods} modalVisibleByJobInfo={modalVisibleByJobInfo} />
      </Panel>
    </Collapse>
  </Spin>
    <Spin size="large" spinning={loadingJobGradeInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"jobGradeInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="职级信息" key="1">
	    <Card bordered={false} style={{ marginTop: '-20px' }}>

	        {jobGradeInfo && jobGradeInfo.map((item,index) => {
	          const editjob = item.id == jobGradeInfoIndex ? true:false;
	          return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
	            <Collapse accordion
	              bordered={false}
	              expandIconPosition="right"
	              style={{width:"100%",margin: '8px auto',position: 'relative'}}
              onChange={(e) => this.onDetailsInfoChange(e,"jobGradeInfo")}
	            >
	            <div className={styles.cardMark}></div>
	            <Panel header={"职级信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"jobGradeInfoIndex")}>
	              <Card bordered={false} style={{ marginTop: '-20px' }}>
	                <div className="demo-container">
	                  {item && Object.keys(item).length ? (
	                   <JobGradeInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"jobGradeInfoIndex"} values={item}/>
	              ):null}
	                </div>
	              </Card>
	            </Panel>
	            </Collapse>
	          </Spin>)
	        })}

	        <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,"JobGradeInfo")}>
	          <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
	          <span>添加职级信息</span>
	        </div>

	    </Card>
	    <JobGradeInfoCreateForm {...parentMethods} modalVisibleByJobGradeInfo={modalVisibleByJobGradeInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingPATJobInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"pATJobInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="专业技术职务信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {pATJobInfo && pATJobInfo.map((item,index) => {
            const editjob = item.id == pATJobInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo}  key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"职级信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"pATJobInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <PATJobInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"pATJobInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,"PATJobInfo")}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加专业技术职务信息</span>
          </div>

      </Card>
      <PATJobInfoCreateForm {...parentMethods} modalVisibleByPATJobInfo={modalVisibleByPATJobInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingPoliceRankInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"policeRankInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="警衔信息" key="1" >
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {policeRankInfo && policeRankInfo.map((item,index) => {
            const editjob = item.id == policeRankInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"警衔信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"policeRankInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <PoliceRankInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"policeRankInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,"PoliceRankInfo")}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加警衔信息</span>
          </div>

      </Card>
      <PoliceRankInfoCreateForm {...parentMethods} modalVisibleByPoliceRankInfo={modalVisibleByPoliceRankInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingEduInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"eduInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="学历信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {eduInfo && eduInfo.map((item,index) => {
            const editjob = item.id == eduInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"学历信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"eduInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <EduInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"eduInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,'EduInfo')}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加学历信息</span>
          </div>

      </Card>
      <EduInfoCreateForm {...parentMethods} modalVisibleByEduInfo={modalVisibleByEduInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingTrainInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"trainInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="培训信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {trainInfo && trainInfo.map((item,index) => {
            const editjob = item.id == trainInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"培训信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"trainInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <TrainInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"trainInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,'TrainInfo')}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加培训信息</span>
          </div>

      </Card>
      <TrainInfoCreateForm {...parentMethods} modalVisibleByTrainInfo={modalVisibleByTrainInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingCheckInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"checkInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="考核信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {checkInfo && checkInfo.map((item,index) => {
            const editjob = item.id == checkInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"考核信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"checkInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <CheckInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"checkInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,'CheckInfo')}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加考核信息</span>
          </div>

      </Card>
      <CheckInfoCreateForm {...parentMethods} modalVisibleByCheckInfo={modalVisibleByCheckInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingCurriculumInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"curriculumInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="履历信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {curriculumInfo && curriculumInfo.map((item,index) => {
            const editjob = item.id == curriculumInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"履历信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"curriculumInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <CurriculumInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"curriculumInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,'CurriculumInfo')}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加履历信息</span>
          </div>

      </Card>
      <CurriculumInfoCreateForm {...parentMethods} modalVisibleByCurriculumInfo={modalVisibleByCurriculumInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingFamilyMemberInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"familyMemberInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="家庭成员信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {familyMemberInfo && familyMemberInfo.map((item,index) => {
            const editjob = item.id == familyMemberInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"家庭成员信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"familyMemberInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <FamilyMemberInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"familyMemberInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,'FamilyMemberInfo')}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加家庭成员信息</span>
          </div>

      </Card>
      <FamilyMemberInfoCreateForm {...parentMethods } modalVisibleByFamilyMemberInfo={modalVisibleByFamilyMemberInfo} />
    </Panel>
    </Collapse>
    </Spin>
    <Spin size="large" spinning={loadingDisciplineInfo}>
    <Collapse
      bordered={false}
      expandIconPosition="right"
      style={{width:"80%",margin: '20px auto',position: 'relative'}}
      onChange={(e) => this.onDetailsInfoChange(e,"disciplineInfo")}
    >
    <div className={styles.cardMark}></div>
    <Panel header="惩戒信息" key="1">
      <Card bordered={false} style={{ marginTop: '-20px' }}>

          {disciplineInfo && disciplineInfo.map((item,index) => {
            const editjob = item.id == disciplineInfoIndex ? true:false;
            return (<Spin size="large" spinning={loadingBaseInfo} key={index+1}>
              <Collapse accordion
                bordered={false}
                expandIconPosition="right"
                style={{width:"100%",margin: '8px auto',position: 'relative'}}
              >
              <div className={styles.cardMark}></div>
              <Panel header={"惩戒信息" + `${index+1}`} key={index+1} extra={this.genExtraInfo(item.id,"disciplineInfoIndex")}>
                <Card bordered={false} style={{ marginTop: '-20px' }}>
                  <div className="demo-container">
                    {item && Object.keys(item).length ? (
                     <DisciplineInfoUpdateForm {...parentUpdate} falg={editjob} spinIndex={"disciplineInfoIndex"} values={item}/>
                ):null}
                  </div>
                </Card>
              </Panel>
              </Collapse>
            </Spin>)
          })}

          <div className={styles.staffcontainer} onClick={() => this.handleModalVisible(true,'DisciplineInfo')}>
            <Icon type="plus-circle" style={{fontSize: '16px',marginRight: '3px'}}/>
            <span>添加惩戒信息</span>
          </div>

      </Card>
      <DisciplineInfoCreateForm {...parentMethods} modalVisibleByDisciplineInfo={modalVisibleByDisciplineInfo} />
    </Panel>
    </Collapse>
    </Spin>

    </PageHeaderWrapper>
    )

  }
}

export default StaffUpdateForm;
